<template>
  <div class="body">
        <div class="left-box">
          <ul class="ul">
            <li class="ul-head">{{cty.yi}}</li>
            <li><a href="#">{{cty.er}}</a></li>
            <li><a href="#">{{cty.san}}</a></li>
            <li><a href="#">{{cty.si}}</a></li>
            <li><a href="#">{{cty.wu}}</a></li>
            <li><a href="#">{{cty.liu}}</a></li>
            <li><a href="#" class="ul-check">{{cty.qi}}</a></li>
          </ul>
        </div>
        <div class="right-head">
            <div class="title">
              <div class="img pailie">
                <img src="../../assets/img/中心.png" />
              </div>
              <div class="weizhi pailie">
                绍兴无废城市运行监测中心.河桥区
              </div>
              <div class="pailie option">
                <a href="#">综合运行监测</a>
              </div>
              <div class="pailie option">
                <a href="#">工业固废</a>
              </div>
              <div class="pailie option">
                <a href="#">危废监测</a>
              </div>
              <div class="pailie option">
                <a href="#">生活固废</a>
              </div>
              <div class="pailie option jianzu">
                <a href="#">建筑固废</a>
              </div>
              <div class="pailie option">
                <a href="#">农业固废</a>
              </div>
            </div>
            <div class="titleRight">
              <div class="frist">
                <p class="titleRight-yi">16:04:09</p>
                <p class="titleRight-er">2020年2月25日</p>
              </div>
              <div class="shu">|</div>
              <div class="frist">
                  <div class="img2">
                    <img src="../../assets/img/天气.png" />
                  </div>
                  <div class="titleRight-san">20'C</div>
                </div>
              <div class="shu">|</div>
              <div class="frist">
                  <p class="titleRight-er">PM2.5</p>
                  <p class="titleRight-yi ">36</p>
              </div>
              <div class="img2 images">
                <img src="../../assets/img/中心.png" />
              </div>
            </div>
          </div>

          <div class="right-main">
            <div class="main-box">
              <div class="main-box-head">
                <div class="img3">
                  <img src="../../assets/img/网络.png" />
                </div>
                <div class="tubiaoTitle">
                  建筑固废综合态势
                </div>
                <div class="open">
                <el-switch
                  v-model="value"
                  active-color="#0066FF"
                  inactive-color="#ff4949">
                </el-switch>
                </div>
                <div class="btns">
                  <div class="bt tn1">本月</div>
                  <div class="bt tn2">上月</div>
                  <div class="bt tn3">全部</div>
                </div>
              </div>
              <div class="main-box-head2">
                <div class="tubiaoTitle2">建设指标体系</div>
                <div class="border"></div>
              </div>
              <div class="main-box-main">
                <div ref="main1" class="biao1"></div>
                <div ref="main2" class="biao1"></div>
                <div ref="main3" class="biao1"></div>
              </div>
              <div class="main-box-head2">
                <div class="tubiaoTitle2">高发区域</div>
                <div class="img4">
                  <img src="../../assets/img/数据条状图.png"/>
                </div>
                <div class="border2"></div>
              </div>
              <div class="main-box-main2">
                <div ref="main4" class="main4"></div>
              </div>
              <div class="main-box-head2">
                <div class="tubiaoTitle2">建筑固废消纳量常情</div>
                <div class="border3"></div>
              </div>
              <div class="main-box-main3">
                <div ref="main5" class="main5"></div>
                <div ref="main6" class="main5"></div>
              </div>
            </div>

            <div class="main-box2">
              <div class="main-box-head">
                <div class="img3">
                  <img src="../../assets/img/网络.png" />
                </div>
                <div class="tubiaoTitle">
                  建筑固废运行态势
                </div>
                <div class="open">
                <el-switch
                  v-model="value"
                  active-color="#0066FF"
                  inactive-color="#ff4949">
                </el-switch>
                </div>
                <div class="btns">
                  <div class="bt tn1">上月</div>
                  <div class="bt tn2">本月</div>
                  <div class="bt tn3">全部</div>
                </div>
              </div>
              <div class="main-box-head2">
                <div class="tubiaoTitle2">建筑固废工作概况</div>
                <div class="img4">
                  <img src="../../assets/img/数据条状图.png"/>
                </div>
                <div class="border4"></div>
              </div>
              <div class="sty">
                <div class="sty-cs" v-for="(item,index) in obj" :keys="index">
                  <div class="top"><span class="green">环比：</span>{{item.huanbi}}</div>
                  <div class="cen">{{item.liang}}</div>
                  <div>{{item.name}}</div>
                </div>
              </div>
              <div class="main-box-head2">
                <div class="tubiaoTitle2">建筑固废运输详情</div>
                <div class="border5"></div>
                <div class="tubiaoTitle2">建筑固废处置详情</div>
                <div class="border5"></div>
              </div>
              <div class="main-box-main4">
                <div ref="main7" class="main7 dinwei1"></div>
                <div ref="main8" class="main7 dinwei2"></div>
              </div>
              <div class="main-box-head2">
                <div class="tubiaoTitle2">运输企业考核评分</div>
                <div class="border5"></div>
                <div class="tubiaoTitle2">处置企业考核评分</div>
                <div class="border5"></div>
              </div>
              <div class="gundong">
                <div class="gundong-wuxian">
                  <ul class="wuxuliebiao">
                      <li v-for="(item,index) in count":keys="index"><span class="font">{{ item.text }}</span><span class="li-btn"><button>{{item.jy}}</button></span></li>
                    </ul>
                </div>
                <div class="gundong-wuxian">
                  <ul class="wuxuliebiao">
                      <li v-for="(item,index) in count":keys="index"><span class="font">{{ item.text }}</span><span class="li-btn"><button>{{item.jy}}</button></span></li>
                    </ul>
                </div>
              </div>
            </div>

          </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
       cty:{
         yi:'绍兴市',
         er:'上虞区',
         san:'嵊州市',
         si:'越城区',
         wu:'新昌县',
         liu:'诸暨市',
         qi:'河桥区'
       },
       value: true,
       obj:[{
         huanbi:47,
         liang:'45吨',
         name:'申报量'
       },
       {
         huanbi:21,
         liang:'35吨',
         name:'运输量'
       },
       {
         huanbi:'2.1%',
         liang:'15',
         name:'消纳量'
       },
       {
         huanbi:21,
         liang:'15',
         name:'再生量'
       }],
       count:[{
         text:'慧杰渣土运输',
         jy:'合格'
       },
       {
         text:'中建渣土运输',
         jy:'合格'
       },
       {
         text:'建信渣土运输',
         jy:'优秀'
       },
       {
         text:'安越渣土运输',
         jy:'不合格'
       },
       {
         text:'慧杰渣土运输',
         jy:'合格'
       },
       {
         text:'慧杰渣土运输',
         jy:'合格'
       }]
    }
  },
  components: {

  },
  mounted () {
    this.viewecharts()
  },
  methods: {
    viewecharts(){
      const echarts = require('echarts')
      const myecharts1=echarts.init(this.$refs.main1)
      const myecharts2=echarts.init(this.$refs.main2)
      const myecharts3=echarts.init(this.$refs.main3)
      const myecharts4=echarts.init(this.$refs.main4)
      const myecharts5=echarts.init(this.$refs.main5)
      const myecharts6=echarts.init(this.$refs.main6)
      const myecharts7=echarts.init(this.$refs.main7)
      const myecharts8=echarts.init(this.$refs.main8)
      const option5 = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '1%',
        bottom: '10%',
        top: '10%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};

      const option4 = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {value: 335, name: '工程渣土'},
                {value: 310, name: '废弃泥浆'},
                {value: 234, name: '工程垃圾'},
                {value: 135, name: '拆除垃圾'},
                {value: 1548, name: '装修垃圾'}
            ]
        }
    ]
};

      const option3 = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          grid: {
              left: '5%',
              right: '4%',
              top:'10%',
              bottom: '5%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '今日消纳量',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                  name: '平均消纳量',
                  type: 'line',
                  stack: '总量',
                  areaStyle: {},
                  data: [220, 182, 191, 234, 290, 330, 310]
              },
          ]
      };

      const option2 = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, '工程渣土'],
            [57.1, 78254, '废弃泥浆'],
            [74.4, 41032, '工程垃圾'],
            [50.1, 12755, '拆除垃圾'],
            [89.7, 20145, '装修垃圾']
        ]
    },
    grid: {
      left: '8%',
      right: '10%',
      top:'5%',
      // bottom: '3%',
      containLabel: true,
      },
    xAxis: {name: 'amount'},
    yAxis: {type: 'category'},
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ],
};

      const option = {
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: 50, name: ''}]
                    }
                ]
            };
            myecharts1.setOption(option)
            myecharts2.setOption(option)
            myecharts3.setOption(option)
            myecharts4.setOption(option2)
            myecharts5.setOption(option3)
            myecharts6.setOption(option4)
            myecharts7.setOption(option5)
            myecharts8.setOption(option5)
    }
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
.body{
  width: 300vh;
  height: 100vh;
  background: url(../../assets/img/7512230abc4724321254dcac513c6ec8.jpg) no-repeat;
  background-size: cover;
  color: white;
}
img{
  width: 100%;
  height: 100%;
}
.left-box{
  width: 100px;
  height: 100%;
  float: left;
  background-color: rgba(150,205,205,0.5);
}
a,a:link,a:visited,a:hover,a:active{
    text-decoration: none;
    color: white;
}
.ul{
  list-style: none;
  padding:0;
  margin:0;
  position: absolute;
  top: 6.25rem;
  left: 1.25rem;
}
.ul-head{
  font-size: 1.375rem;
}
.ul-check{
  font-weight: 700;
  font-size: 1.125rem;
}
.ul > li{
  color: white;
  list-style: none;
  padding:0;
  margin:1.25rem auto;
}
.title{
  margin-left: 21.875rem;
  margin-top: 0.625rem;
  float: left;
}
.right-head{
  float: left
}
.img{
  width: 1.25rem;
  margin-top: 0.3125rem;
}
.pailie{
  float: left;
  margin-right: 0.625rem;
  color: white;
}
.weizhi{
  font-size: 1.375rem;
  font-weight: 600;
}
.option{
  font-size:1rem;
  font-weight: 600;
  margin-top: 0.3125rem;
}
.jianzu{
  background-color: rgba(255,165,79,0.5);
  border-bottom: 0.25rem solid orange;
}
.titleRight{
  float: left;
  margin-left: 6.25rem;
  margin-top: 0.625rem;
}
.frist{
  text-align: center;
  float: left;
}
.titleRight-er{
  font-size: 0.5rem;
}
.shu{
  float: left;
  margin: 0.3125rem 0.625rem;
}
.img2{
  width: 1.875rem;
  float: left;
}
.titleRight-san{
  float: left;
  margin: 0.3125rem 0 0 0.625rem;
}
.images{
  margin: 0 2.5rem;
}
.right-main{
  float: left;
}
.main-box{
  width: 400px;
  height: 520px;
  margin: 10px 0 0 20px;
  border: 2px solid darkcyan;
  border-radius: 4px;
  float: left;
}
.main-box-head{
  height: 30px;
  padding: 10px 0 0 10px;
  background-color: rgba(0,128,128,0.3);
}
.img3{
  width: 1.25rem;
  float: left;
}
.tubiaoTitle{
  float: left;
  margin: 0 0.3125rem;
}
.open{
  float: left;
}
.btns{
  margin-left: 3.75rem;
  float: left;
  border:1px solid dodgerblue;
   border-radius: 5px;
}
.bt{
  width: 2.5rem;
  height: 1.25rem;
  color: white;
  text-align: center;
}
.tn1{
  background-color: #0066FF;
  float: left;
   border-radius: 3px;
}
.tn2{
  background-color: transparent;
  float: left;
}
.tn3{
  background-color: transparent;
  float: left;
}
.main-box-head2{
  margin-top: 10px;
  float: left;
}
.tubiaoTitle2{
  margin-left: 10px;
  float: left;
}
.border{
  width: 270px;
  float: left;
  border: 1px solid rgba(0,128,128,0.5);
  margin-top: 10px;
}
.main-box-main{
  margin-top: 10px;
  float: left;
}
.biao1{
  width: 120px;
  height: 120px;
  margin-left: 10px;
  float: left;
}
.img4{
  width: 20px;
  height: 20px;
  float: left;
  margin: 0 10px;
}
.border2{
  width: 260px;
  float: left;
  border: 1px solid rgba(0,128,128,0.5);
  margin-top: 10px;
}
.main-box-main2{
  width: 350px;
  height: 130px;
  float: left;
}
.main4{
  width: 300px;
  height: 200px;
  float: left;
}
.border3{
  width: 220px;
  float: left;
  border: 1px solid rgba(0,128,128,0.5);
  margin-top: 10px;
}
.main-box-main3{
  float: left;
}
.main5{
  width: 190px;
  height: 120px;
  float: left;
}
.main-box2{
  float: left;
  width: 400px;
  height: 520px;
  margin: 10px 0 0 750px;
  border: 2px solid darkcyan;
  border-radius: 4px;
}
.border4{
  width: 200px;
  float: left;
  border: 1px solid rgba(0,128,128,0.5);
  margin-top: 10px;
}
.sty{
  float: left;
  margin-top: 10px;
}
.sty-cs{
  float: left;
  text-align: center;
  font-size: 0.9375rem;
  margin-left: 40px;
  background-color: rgba(47,79,79,0.5);
}
.green{
  color: #01FF70;
}
.top{
  font-size: 10px;
}
.cen{
  font-size: 1.125rem;
}
.border5{
  width: 50px;
  float: left;
  border: 1px solid rgba(0,128,128,0.5);
  margin-top: 10px;
}
.main-box-main4{
  float: left;
}
.main7{
  width: 190px;
  height: 160px;
  float: left;
}
.gundong{
  float: left;
}
.gundong-wuxian{
    float: left;
    width: 180px;
    height: 150px;
    margin-left: 10px;
    overflow: auto;
}
 .gundong-wuxian::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .gundong-wuxian::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .gundong-wuxian::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }
.wuxuliebiao{
  margin-left: 20px;
}
.wuxuliebiao > li{
  margin: 15px 0;
  color: yellow;
}
.font{
  color: white;
}
.li-btn > button{
  width: 40px;
  border-radius: 4px;
  background-color: rgba(46,139,87,0.5);
  text-align: center;
  margin-left: 10px;
  font-size: 12px;
  color: white;
  border: 1px solid transparent;
  outline: none;
}

</style>
